/**
 * @description: 生成4位随机数
 * @Author: Zhy
 * @Date: 2024-03-03 19:53:27
 * @return {返回4位随机生成的字符串}
 */
function rand() {
  var str = "abcdefghijklmnopqrstuvwxyz0123456789";
  var arr = str.split(""); /* 将字符串转换为数组 */
  var validate = ""; /* 保存生成的随机字符串 */
  var ranNum;
  for (var i = 0; i < 4; i++) {
    ranNum = Math.floor(
      Math.random() * 36
    ); /* 生成一个在[0,35]之间的随机数（因为数组长度为36），用作下标 */

    validate +=
      arr[ranNum] + " "; /* 取出arr中下标为ranNum的字符添加到validate */
  }
  return validate;
}

let validateCode = rand();
function changeCode() {
  validateCode = rand();
}

// 干扰线的随机x坐标值
function lineX() {
  var ranLineX = Math.floor(Math.random() * 90);
  return ranLineX;
}

// 干扰线的随机y坐标值
function lineY() {
  var ranLineY = Math.floor(Math.random() * 40);
  return ranLineY;
}

function clickChange() {
  var mycanvas = document.getElementById("mycanvas");
  var cxt = mycanvas.getContext("2d");
  cxt.fillStyle = "#333";
  cxt.fillRect(0, 0, 90, 40); /* 绘制一个填充的矩形 */

  /*生成干扰线20条*/
  for (var j = 0; j < 20; j++) {
    cxt.strokeStyle = "#fff"; /* 设置干扰项颜色 */
    cxt.beginPath(); /* 若省略beginPath，则每点击一次验证码会累积干扰线的条数 */
    cxt.moveTo(lineX(), lineY());
    cxt.lineTo(lineX(), lineY());
    cxt.lineWidth = 0.5; /* 线宽 */
    cxt.closePath();
    cxt.stroke();
  }

  cxt.fillStyle = "white"; /* 为后续图形填充白色 */
  cxt.font = "bold 22px Arial";
  cxt.fillText(
    validateCode,
    14,
    25
  ); /* 绘制文本，把rand()生成的随机数文本填充到canvas中 */
}

clickChange();

// 为canvas添加单击事件，点击验证码更换
mycanvas.onclick = function (e) {
  e.preventDefault(); /* 阻止鼠标点击发生默认的行为 */
  changeCode();
  clickChange();
};

const username = document.getElementsByClassName("user-int")[0],
  password1 = document.getElementsByClassName("pwd-int")[0],
  password2 = document.getElementsByClassName("pwd-int")[1],
  codeInt = document.getElementsByClassName("code-int")[0];
const getBton = document.getElementsByClassName("get-login")[0];

// 正则表达式验证用户名
const regUsername = /^(?:[\u4e00-\u9fa5a-zA-Z·]{2,16})$/;
// 正则表达式验证密码
const regName = /^[a-zA-Z0-9_]{6,16}$/;

getBton.addEventListener("click", (event) => {
  const code = codeInt.value.replace(/./g, "$& ");

  if (!username.value || !regUsername.test(username.value)) {
    event.preventDefault();
    alert("用户名不符合要求（2-16位中文或2-16位英文）");
  } else if (!password1.value || !regName.test(password1.value)) {
    event.preventDefault();
    alert("密码有误（只能由字母、数字、下划线组成，长度6-16位）");
  } else if (password1.value !== password2.value) {
    event.preventDefault();
    alert("两次密码不一致");
  } else if (code !== validateCode) {
    event.preventDefault();
    alert("验证码错误");
    console.log(validateCode);
    location.reload();
  } else {
    alert("注册成功");
    window.location.href = "http://127.24.6.11";
  }
});

// 输入框提示信息
document.addEventListener("DOMContentLoaded", function () {
  const inputName = document.getElementsByClassName("user-int")[0];
  const pName = inputName.nextElementSibling;

  inputName.addEventListener("focus", function () {
    pName.classList = "animate__animated animate__fadeIn";
    pName.style.display = "block";
  });
  inputName.addEventListener("blur", function () {
    pName.classList = "";
    pName.style.display = "none";
  });

  const inputPwd = document.getElementsByClassName("pwd-int")[0];
  const pPwd = inputPwd.nextElementSibling;

  inputPwd.addEventListener("focus", function () {
    pPwd.classList = "animate__animated animate__fadeIn";
    pPwd.style.display = "block";
  });

  inputPwd.addEventListener("blur", function () {
    pPwd.classList = "";
    pPwd.style.display = "none";
  });
});
